<template>
    <div>
        <!-- :city="city" 父组件向子组件传递从static/mock获取的json数据 -->
        <home-header :city="city"></home-header>
        <home-swiper :swiperList="swiperList"></home-swiper>
        <home-icons :iconList="iconList"></home-icons>
        <home-recommend :recommendList="recommendList"></home-recommend>
    </div>
</template>
<script>
import axios from 'axios';
import HomeHeader from './components/Header';
import HomeSwiper from './components/Swiper';
import HomeIcons from './components/Icons';
import HomeRecommend from './components/Recommend';

export default {
    name: 'Home',
    components: {
        HomeHeader,
        HomeSwiper,
        HomeIcons,
        HomeRecommend,
    },
    data() {
        return {
            city: '',
            swiperList: [],
            iconList: [],
            recommendList: [],
        };
    },
    methods: {
        getHomeInfo() {
            /* 这里的路径是要在config/index.js中的dev对象中修改的，达到一个路径转发的一个目的 */
            axios.get('/api/index.json').then(this.getHomeInfoSucc);
        },
        getHomeInfoSucc(respose) {
            // console.log(respose);
            const res = respose.data;
            if (res.ret && res.data) {
                const data = res.data;
                /* 把static/mock目录下的模拟数据赋给当前页面的数组 */
                this.city = data.city;
                this.swiperList = data.swiperList;
                this.iconList = data.iconList;
                this.recommendList = data.recommendList;
            }
        },
    },
    // 页面一旦挂载完成（渲染完成）就会发送ajax请求
    mounted() {
        this.getHomeInfo();
    },
};
/**
 * 因为我们没有后端的支持，所以
 * 把本地开发的模拟数据都放在static文件目录下，
 * 因为只有这个文件是外部能访问得到的
 *  */
</script>
<style scoped></style>
